<template>
	<view>
		<view class="page">
			<view class="area-header">
				<u-text text="配置分包参数">
				</u-text>
			</view>
			<view class="container">
				<label class="input-label" for="input1">分包包装个数：</label>
				<u-input style="display: block; width: 50px;" placeholder="请输入内容" border="surround" v-model="value"
					@change="change"></u-input>
			</view>
			<u-line></u-line>
			<view class="list-content">
				<!-- 列表 -->
				<u-list class="list" v-if="scannedList.length>0" :height="ListViewHeight">
					<u-list-item v-for="(item, index) in scannedList" :key="index">
						<view class="container">
							<label class="input-label" style="width: 70px;" for="input1">包装{{index+1}}：</label>
							<u-input type="text" @change="handleInputChange(index, $event)"></u-input>
						</view>
					</u-list-item>
				</u-list>
			</view>
			<u-line></u-line>
			<view class="search">
				<u-button type="primary" @click="confirmReceiveData" class="custom-style">分包提交</u-button>
			</view>
		</view>
		<u-modal :show="messageShow" :closeOnClickOverlay="false" title="提示" content="确定对待分包数据进行分包提交吗？"
			:showCancelButton="true" @confirm="messageConfirm" @cancel="messageCancel"></u-modal>
	</view>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue';
	import { http } from "../../../utils/http";
	import { useUserStore } from '../../../stores/useUserStore';

	const ListViewHeight = ref(0);
	//分包包装个数
	const value = ref('')
	function change() {
		if (value.value == "1") {
			uni.$u.toast('分包包装个数不能是一个！');
			return
		}
		scannedList.value.length = Number(value.value)

	}
	//每个分包数量值
	function handleInputChange(index, value) {
		scannedList.value[index] = Number(value);
	}

	// 选择订单
	const messageShow = ref(false);
	const scannedList = ref([])
	const props = defineProps({
		result: {
			type: String,
		},
	});
	console.log(JSON.parse(props.result))
	const data = JSON.parse(props.result)
	function confirmReceiveData() {
		if (scannedList.value.length) {
			messageShow.value = true;
		} else {
			uni.$u.toast('分包包装个数不能为空！');
		}
	}
	//分包提交确认
	async function messageConfirm() {
		messageShow.value = false;
		if (!areValueAndLengthMatch(scannedList.value)) {
			uni.$u.toast('单个包装数量不能为空');
			return
		}
		let quantity = 0
		for (let i = 0; i < scannedList.value.length; i++) {
			quantity += scannedList.value[i]
		}
		console.log(quantity)
		if (data.totalQuantity != quantity) {
			uni.$u.toast('分包后数量与分包前数量不一致！');
			return
		}

		const res = await http({
			url: '/wms/storageunit/WM_403',
			method: 'POST',
			data: {
				extenalCode: data.extenalCode,
				counts: scannedList.value,

			}
		});
		if (res.code == "200") {
			uni.navigateTo({
				url: `/pages/use/unpack/submit?result=${JSON.stringify(res.data)}`
			});
		};
	}
	//提交取消
	function messageCancel() {
		messageShow.value = false;
	}
	//验证数组长度与数组内容是否匹配true匹配
	function areValueAndLengthMatch(arr) {
		// 使用 filter 过滤掉非空元素
		const nonEmptyValuesCount = arr.filter(value => value != null && value !== '').length;

		// 检查过滤后的值的数量是否等于原数组的长度
		return nonEmptyValuesCount === arr.length;
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		align-items: center;
		margin-left: 20px;
		margin-right: 25px;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	.search {
		display: flex;
		flex: 1;

		.custom-style {
			// width: 120px;
			margin: 12px 5px 5px;
			height: 40px;
			border-radius: 8px;

			&:nth-child(1) {
				flex: 1
			}

			&:nth-child(2) {
				flex: 3
			}
		}
	}

	.input-label {
		margin-right: 10px;
		/* 添加间距 */
	}

	.page {
		display: flex;
		flex-direction: column;
	}

	.upload-scan {
		padding: 10px 40rpx 10px 40rpx;
	}

	.area-header {
		color: #909193;
		padding: 10px 15px;
		margin-bottom: 0;
		font-size: 15px;
		background-color: #f3f4f6;
		display: flex;
	}

	.list-content {
		padding: $uni-page-padding;

		.list {
			.card {
				margin-top: 5px;
				margin-bottom: 10px;
				border-radius: 7px;
				display: flex;
				align-items: center;
				padding: 10px 0;
				transition: all 300ms ease;
				box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

				.left {
					// flex-basis: 90rpx;
					padding-right: 10px;
					text-align: right;
					font-size: 13px;

					.enter {
						line-height: 20px;
						margin-bottom: 5px;
					}

					.number {
						font-size: 13px;
						line-height: 18px;
					}

					:deep(.u-icon--right) {
						flex-direction: row-reverse;
					}
				}

				.right {
					flex: 1;
					padding-left: 15px;

					.title {
						font-size: 15px;
						line-height: 20px;
						margin-bottom: 5px;
						font-weight: 700;
					}

					.body {
						font-size: 13px;
						line-height: 18px;
					}

					.body1 {
						font-size: 13px;
						line-height: 18px;
						padding-top: 2px;

						.span {
							width: 100%;
							// text-align: left;
							display: inline-block;
						}
					}
				}
			}
		}
	}
</style>